<template>
  <div style="margin-top: 20px">
    <el-page-header @back="goBack" content="教学巡查分析"> </el-page-header>
    <el-table border style="width: 100%; margin-top: 20px" :data="tableData.slice((current - 1) * size, current * size)">
      <!-- prop="date" -->
      <el-table-column label="日期" width="120" prop="date"> </el-table-column>
      <el-table-column label="周次" prop="weeks"> </el-table-column>
      <el-table-column label="教室" prop="classroom"> </el-table-column>
      <el-table-column label="班级" prop="classes"> </el-table-column>
      <el-table-column label="应到人数" prop="shouldArrival"> </el-table-column>
      <el-table-column label="实到人数" prop="arrival"> </el-table-column>
      <el-table-column label="出勤率" sortable prop="arrivalRate">
      </el-table-column>
      <el-table-column label="带食物率" sortable prop="foodBringRate">123
      </el-table-column>
      <el-table-column label="辅导员" width="130" prop="counsellor">
      </el-table-column>
      <el-table-column label="任课老师" width="130" prop="teacher">
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5,10]"
        :current-page.sync="current"
        :page-size="5"
        layout="sizes, prev, pager, slot"
        :total="tableData.length"
        row-key
        v-show="tableData != 0"
      >
              <el-button type="text" @click="showMore">下一页</el-button>    
      </el-pagination>
  </div>
</template>
  
  <script>
export default {
  name:"analyzedetails",
  data() {
    return {
      tableData: [],
      classes: "",
      startTime: null,
      endTime: null,
      size: 5,
      current: 1,
    };
  },
  created() {
    this.classes = this.$route.query.classes;
    this.startTime = this.$route.query.startTime;
    this.endTime = this.$route.query.endTime;
    this.SingleClass();
  },
  methods: {
    SingleClass() {
      let start = this.formatDate(this.startTime.toString());
      let end = this.formatDate(this.endTime.toString());
      let obj = {
        startTime: start,
        endTime: end,
        classes: this.classes,
      };
      this.$get("/api/schedule/dataStatistics/classes", obj || null).then(
        (res) => {
          console.log(res);
          this.tableData = res.data;
        }
      );
    },
    // 格式化时间
    formatDate(dateStr) {
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) {
        throw new Error("Invalid date string");
      }
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-based, so add 1
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    goBack() {
        console.log('1');
      this.$router.push("/home/patrolsinspection");
    },
     // 分页
     handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
    showMore() {
      if (this.current < this.tableData.length / this.size) {
        this.current++;
      } else {
        this.$message({
          message: "已经是最后一页",
          type: "warning",
        });
      }
    },
  },
};
</script>
  
  <style scoped>
.el-table >>> .cell {
  text-align: center;
}
</style>